Commit方式+CommitLint校验+Prettier格式化

根据Angular团队的git commit规范，简单说下常用的commit的方式：

type 主要有一下几种：

scope 规则（选填）

scope 代表本地 commit 的影响范围，例如文件(index.js)、文件夹(/problem)

subject 规则（必填）

通过简短的话来描述本次修改的内容。

例如：

• 新增 Problem 页面
• 新增 申诉组件
• 删除 待办单ui
• 修复 登录账号报错
• 修正 css 属性拼写问题

body 规则（选填）

当 subject 不能对 commit 进行清楚的描述，可以在 body 中进行补充说明。

建议填写以下内容：

• 为什么进行本次修改
• 本次修改了哪些内容
• 修改后的影响有哪些

footer 规则（选填）：根据我们现有项目，不需要填写这个

footer 中建议内容：

• 该 commit 和某个bug或者某个任务/需求关联，提交后能关闭该bug/任务/需求。
• 该 commit 有不兼容上个版本的代码，则以 重要修改: 开头填写不兼容信息。

husky + commitlint校验 + prettier格式化

安装husky + commitlint

npm install husky@4.3.0 @commitlint/config-conventional@16.2.1 @commitlint/cli@16.2.3 prettier-eslint-cli@5.0.0 lint-staged@9.5.0 -D
dos

在项目根目录创建 commitlint.config.js 文件，内容如下：

// commitlint.config.js
/**
 * feat：新功能更新
 * style：改变代码格式，如删除空行、格式化代码、去除不必要的分号等等，不影响代码功能逻辑的操作
 * fix：修补某功能的bug
 * refactor：代码重构时使用，不是功能更新也不是 bug 修复的更改
 * perf: 性能优化等
 * test: 添加测试用例或者修改测试用例
 * build：由打包工具造成的改变（如gulp、webpack编译文件）
 * chore：更改构建过程、修改配置文件，添加/删除辅助工具或者库
 * revert：撤销之前的提交
 */
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', ['feat', 'fix', 'style', 'refactor', 'perf', 'test', 'build', 'chore', 'revert']],
    'subject-max-length': [1, 'always', 150], // subject建议150字以内
  },
};
javascript

在项目根目录创建 .prettierrc.js 文件，内容如下：

// .prettierrc.js
module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  jsxBracketSameLine: true,
  arrowParens: 'avoid',
};
javascript

在项目根目录创建 .eslintrc.js 文件，内容如下：

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'space-before-function-paren': 0,
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
  globals: {
    ImagePreview: true,
    Toast: true,
    wx: true,
    AMap: true,
    Dialog: true,
    dayjs: true,
    WXInlinePlayer: true,
  },
};
javascript

• prettier-eslint更多配置

• lint-staged更多配置

更多其他配置可根据各项目实际情况来编辑。

package.json中添加lint配置：

"lint-staged": {
  "*.{js,scss,md,vue}": [
    "prettier-eslint --config=.prettierrc.js --eslint-config-path=.eslintrc.js --write",
    "git add ."
  ]
},
javascript

package.json 中添加 husky 配置：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged", //代码格式化
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" //commit校验
  }
}
javascript